<template>
  <div class="app-container">
     
    
        <el-button type="primary" v-hasPermi="['projectManager:member:add']" plain  size="small" icon="el-icon-plus" @click="handleAdd()">添加成员</el-button>
        <el-button type="success" v-hasPermi="['projectManager:member:save']" plain  size="small" icon="el-icon-check" @click="handleSave()">保存</el-button>
        <el-table  :data="projectManagerMemberList" highlight-current-row style="width: 100%">
          <el-table-column type="index" label="行号" property="lineNo" width="200"> 
          </el-table-column>
          <el-table-column property="type" label="岗位">
              <template slot-scope="scope">
                <el-select v-model="scope.row.type" filterable clearable  style="width: 100%;" @change="positionChange">
                  <el-option v-for="dict in dict.type.owner_position" :key="dict.value" :disabled="dict.value == 'pjm'" :label="dict.label" :value="dict.value" />
                </el-select>
              </template>
          </el-table-column>
          <el-table-column property="userId" label="姓名">
            <template slot-scope="scope">
              <el-select v-model="scope.row.userId" filterable clearable  style="width: 100%;">
                <el-option v-for="user in userList" :key="user.userId" :label="user.nickName" :value="user.userId" />
              </el-select> 
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="200">
            <template slot-scope="scope">
              <el-button size="mini" type="text"   icon="el-icon-delete" @click="handleDel(scope.row)" v-hasPermi="['projectManager:member:save']">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      
  </div>
</template>

<script>

import {getTaskUsers}  from "@/api/system/user";
import {query,save}  from "@/api/projectManage/projectManagerMember";

export default {
  
  name: "TeamMember", 
  dicts: ['project_list_status','owner_position','project_task_overdue','project_level','product_line','product_type'],
  data() {
    return {
    
      loading: false,
      
      //团队成员列表
      projectManagerMemberList:[],

      //人员列表
      userList:[],
    
    };
  },
  created() {
    this.getList(); 
    this.handleTaskUsers();
    
  },
 
  methods: {
 
   //加载参加任务的人员列表
   handleTaskUsers(){ 
    getTaskUsers().then(response => {
      this.userList = response.data;
    });
  },
 
 
    /** 查询项目列表 */
    getList() { 
      this.loading = true;
      query().then(response => {
        this.projectManagerMemberList = [];
        for(let i=0;i<response.data.length;i++){
            let item = response.data[i];
            item.lineNo = (i+1);
            this.projectManagerMemberList.push(item);
        }  
 
        this.loading = false;
      });
    },
 

    /**保存成员*/
    handleSave(){
      this.loading = true;
      save(this.projectManagerMemberList).then(response => {
            this.getList();
      });
    },
 
 
    /** 新增按钮操作 */
    handleAdd() {
      let lineNo = this.projectManagerMemberList.length+1;
      let item = { 
        lineNo:lineNo,
        type:'',
        userId:''

      };
      this.projectManagerMemberList.push(item);
    },
    
    /** 删除按钮操作 */
    handleDel(row) {
       let  teamList = [];
       for(let i=0;i<this.projectManagerMemberList.length;i++){
          let item = this.projectManagerMemberList[i];
          if(item.lineNo != row.lineNo){
              teamList.push(item);
          }
       }
       this.projectManagerMemberList = teamList;
      
    },
 
  }
};
</script>
<style scoped>
.el-col {
  height: 60px;
}

.labelword ::v-deep .el-form-item__label {
  white-space: pre-line !important;
  line-height: 15px !important;
}

.el-table .danger-row {
  background: rgb(187, 179, 184);
}

.el-table .success-row {
  background: #00FF00;
}
</style>
